<template>
<div>
  <div class="item" :key="index" v-for="(btand, index) in moreBrand" @click="brandDetail(btand.id)">
    <img mode="widthFix" :src="btand.app_list_pic_url">
    <div class="title">
      <h1>{{btand.name}}</h1>
      <img mode="widthFix" src="../../../static/img/new.png">
      <span>{{btand.floor_price}}元起</span>
    </div>
    <div class="text">
      {{btand.simple_desc}}
    </div>
    <v-split></v-split>
  </div>
  <v-more :isMore="isMore"></v-more>
</div>
</template>

<script>
import vSplit from '@/components/split'
import {get} from '@/utils'
import vMore from '@/components/more'

export default {
  data () {
    return {
      page: 0,
      pageSize: 10,
      isMore: false,
      moreBrand: []
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    async getData () {
      const res = await get('/weapp/moreBrand', {
        page: this.page,
        pageSize: this.pageSize
      })
      this.moreBrand = this.moreBrand.concat(res.moreBrand)
      if (res.moreBrand.length < 10) {
        this.isMore = true
      }
      wx.hideLoading()
    },
    brandDetail (id) {
      wx.navigateTo({
        url: `/pages/brand/main?id=${id}`
      })
    }
  },
  components: {
    vSplit,
    vMore
  },
  onReachBottom () {
    if (this.isMore) return
    this.page = this.page + 1
    wx.showLoading({
      title: '加载中'
    })
    this.getData()
  }
}
</script>

<style lang="less" scoped>
.item{
  background: #fff;
  img{
    width: 100%;
  }
  .title{
    padding: 25rpx;
    height: 50rpx;
    h1{
      display: inline-block;
      font-size: 40rpx;
      font-weight: bold;
      margin-right: 50rpx;
      vertical-align: middle;
    }
    img{
      display: inline-block;
      width: 70rpx;
      vertical-align: middle;
    }
    span{
      display: inline-block;
      font-size: 30rpx;
      color: #B4282D;
      float: right;
      line-height: 50rpx;
    }
  }
  .text{
    padding: 0 25rpx 50rpx 25rpx;
    color: #333;
    font-size: 26rpx;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
